<template>
    <!-- 车辆导入 -->
    <el-dialog title="导入车辆" :visible.sync="upload.open" width="400px" append-to-body @close="dialogClose">

        <el-form label-width="100px" class="updateForm" ref="uploadForm" :model="uploadForm" :rules="uploadRules">
            <el-form-item :label="$t('vehicle.brand.vehicleBrand')" prop="brandId">
                <el-select v-model="uploadForm.brandId" clearable @change="seriesChange" :placeholder="$t('vehicle.brand.placeholder.vehicleBrand')">
                    <el-option v-for="dict in brandList" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('vehicle.series.modelName')" prop="seriesId">
                <el-select v-model="uploadForm.seriesId" @change="typeChange" :placeholder="$t('vehicle.series.placeholder.modelName')" clearable>
                   <template v-if="seriesList.length">
                        <el-option v-for="dict in seriesList" :key="dict.value" :label="dict.label" :value="dict.value" />
                   </template>
                </el-select>
            </el-form-item>
            <!-- <el-form-item :label="$t('vehicle.type.vehicleModel')" prop="typeId">
                <el-select v-model="uploadForm.typeId"  @change="getImgList" clearable :placeholder="$t('vehicle.type.placeholder.vehicleModel')">
                    <template v-if="typesList.length">
                        <el-option @click="" v-for="dict in typesList" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </template>
                    
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('vehicle.type.vehicleColor')" prop="imgId">
                <el-select v-model="uploadForm.imgId" :placeholder="$t('vehicle.type.placeholder.vehicleColor')">
                    <template v-if="imgsList.length">
                        <el-option v-for="dict in imgsList" :key="dict.value" :label="dict.label" :value="dict.value" />
                    </template>
                </el-select>
            </el-form-item> -->
        </el-form>

        <el-button type="primary" @click="importTemplate()" style="margin-bottom: 10px">{{ $t('common.upload.downloadTemplate') }}</el-button>

        <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url"
            :disabled="upload.isUploading" :on-success="handleFileSuccess" :on-progress="handleFileUploadProgress"
            :auto-upload="false" drag :data="uploadForm">
            <i class="el-icon-upload"></i>

            <div class="el-upload__text">
                {{ $t('common.upload.dragFilesHere') }}
                <em>{{ $t('common.upload.clickToUpload') }}</em>
            </div>

            <div class="el-upload__tip" style="color: red" slot="tip">
                {{ $t('common.upload.onlyXlsAndXlsx') }}
            </div>
        </el-upload>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="uploadSubmit" :loading="upload.isUploading">{{$t('common.dialog.confirm') }}</el-button>
            <el-button @click="upload.open = false">{{ $t('common.dialog.cancel') }}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { listBrand } from "@/api/vehicle/brand/data";
import { listSeries } from "@/api/vehicle/series/data";
import { listType } from "@/api/vehicle/type/data";
import { ListImg } from "@/api/vehicle/data";
import { getToken } from "@/utils/auth";
import { getTemplate } from "@/utils/zipdownload";

export default {
    name: "vehicleImport",
    data() {
        return {
            imgsList: [],
            typesList: [],
            seriesList: [],
            brandList: [],
            upload: {
                open: false,
                isUploading: false,
                headers: { Authorization: "Bearer " + getToken() },
                url: process.env.VUE_APP_BASE_API + "/vehicle/importData",
            },
            uploadForm: {
                brandId: "",
                seriesId: "",
                typeId: "",
                imgId:""
            },
            uploadRules: {
                brandId: [
                    {
                        required: true,
                        message: this.$t("vehicle.brand.rules.brand"),
                        trigger: "change",
                    },
                ],
                seriesId: [
                    {
                        required: true,
                        message: this.$t("vehicle.series.rules.model"),
                        trigger: "change",
                    },
                ],
                file: "",
            },
        }
    },
    methods: {
        init() {
            this.upload.open = true;
            this.getBrandList();
            // this.getSeriesList();
            // this.getTypeList();
        },
        /** 下载模板操作 */
        importTemplate() {
            this.download('/vehicle/importTemplate', {
            }, `vehicle_template_${new Date().getTime()}.xlsx`)
        },
        uploadSubmit() {
            this.$refs["uploadForm"].validate(valid => {
                if (valid) {
                    this.$refs.upload.submit();
                    } 
            });
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.resetForm("uploadForm");
            this.$refs.upload.clearFiles();
            this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", this.$t('common.alert.importResult'), { dangerouslyUseHTMLString: true });
            this.refreshData();
        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit();
        },
        refreshData() {
            this.$emit("refreshData")
        },

        getBrandList() {
            listBrand().then(response => {
                this.brandList = response.rows.map(item => {
                    return {
                        label: item.vehicleBrand,
                        value: item.id
                    }
                })
            })
        },

        // getSeriesList() {
        //     listSeries().then(response => {
        //         this.seriesList = response.rows.map(item => {
        //             return {
        //                 label: item.vehicleSeries,
        //                 value: item.id
        //             }
        //         })
        //     })
        // },

        typeChange(e) {
            console.log(e);
            const seriesId = e;
            if (seriesId == null || seriesId == "") {
               this.clearTypeList();
               this.clearImgList();
                return;
            }
            var data = {};
            data.seriesId = this.uploadForm.seriesId;
            listType(data).then(response => {
                this.typesList = response.rows.map(item => {
                    return {
                        label: item.typeName,
                        value: item.id
                    }
                })
            })
        },

        getImgList(e) {
            const imgId = e;
            if (imgId == null || imgId == "") {
               this.clearImgList();
                return;
            }
                
            if (this.uploadForm.typeId != null) {
                var data = {};
                data.vehicleTypeId = this.uploadForm.typeId;
                ListImg(data).then(response => {
                    this.imgsList = response.rows.map(item => {
                        return {
                            label: item.colorDescription,
                            value: item.id
                        }
                    })
                })
            }
        },

        seriesChange(e) {
            console.log(e);
            const brandId = e;
            if (brandId == null || brandId == "") {
               this.clearSeriesList();
               this.clearTypeList();
               this.clearImgList();
                return;
            }

            var data = {};
            data.brandId = this.uploadForm.brandId;
            listSeries(data).then(response => {
                this.seriesList = response.rows.map(item => {
                    return {
                        label: item.vehicleSeries,
                        value: item.id
                    }
                })
            })
        },
        //对话关闭回调
        dialogClose(){
            console.log("对话框关闭");
            // this.resetForm("dataForm");
            this.$refs['uploadForm'].resetFields();
            this.$refs.upload.clearFiles();


        },
        clearSeriesList(){
                this.seriesList = [];
                this.uploadForm.seriesId = "";
        },
        clearTypeList(){
            this.typesList = [];
            this.uploadForm.typeId = "";
        },
        clearImgList(){
            this.imgsList = [];
            this.uploadForm.imgId = "";
        }


    },
}
</script>

<style scoped></style>
